<!-- <a routerLink="/test">{{title}}</a> -->
<dialog-outlet></dialog-outlet>

<div class="app-container" mdl-shadow="2">
  <mdl-layout #appLayout mdl-layout-fixed-header mdl-layout-header-seamed>
    <mdl-layout-header *ngIf="!IsLogin">
      <mdl-layout-header-row>
        <mdl-layout-title>
          {{ pageTitle }}
        </mdl-layout-title>
        <!-- <mdl-textfield type="text" [(ngModel)]="theText" icon="search"></mdl-textfield> -->
        <mdl-layout-spacer></mdl-layout-spacer>
        <button mdl-button #btn1="mdlButton" (click)="m1.toggle($event, btn1)" mdl-button-type="icon" mdl-ripple><mdl-icon>more_vert</mdl-icon></button>
        <mdl-menu #m1="mdlMenu" mdl-menu-position="bottom-right">
          <mdl-menu-item mdl-ripple (click)="changePass()">
            <a routerLink="change_pass" class="mdl-navigation__link">
              <mdl-icon class="icon material-icons">lock_open</mdl-icon> 修改密码
            </a>
          </mdl-menu-item>
          <!-- <mdl-menu-item mdl-ripple mdl-menu-item-full-bleed-divider></mdl-menu-item> -->
          <!-- <mdl-menu-item mdl-ripple disabled>Disabled Action</mdl-menu-item> -->
          <mdl-menu-item>
            <a (click)="logout()" class="mdl-navigation__link">
              <mdl-icon class="icon material-icons">power_settings_new</mdl-icon>退出登录
            </a>
          </mdl-menu-item>
        </mdl-menu>
      </mdl-layout-header-row>
    </mdl-layout-header>
    <mdl-layout-drawer *ngIf="!IsLogin">
      <mdl-layout-title>
        <h1>{{managable?.name}}</h1>
        <p>{{ userRole?.roleName }}: {{sessionUser?.email}}</p>
        <!-- <img class="header-logo" src="assets/header.jpeg"> -->
      </mdl-layout-title>
      <nav mdl-ripple class="mdl-navigation">
        <a class="mdl-navigation__link" routerLink="{{ menu.path }}" *ngFor="let menu of (slideMenus | role: userRole); let i = index;"
          (click)="navLinkClick(i)">
          <i class="material-icons">{{ menu.icon }}</i>{{ menu.text }}
        </a>
      </nav>
    </mdl-layout-drawer>
    <mdl-layout-content [class.login]="IsLogin">
      <router-outlet>
      </router-outlet>

      <!-- Your content goes here -->
    </mdl-layout-content>
  </mdl-layout>
</div>